<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/@wu-component/web-core-plus"></script>
</head>
<body>
<div id="app">
    <div style="width: 600px">
        <h2>picture-card</h2>
        <wu-plus-upload
            show-file-list="false"
            id="upload0"
            auto-upload="true"
            list-type="picture-card"
            file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{"name":"food2.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
            headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
            action="https://canyuegongzi.xyz/simple-file-center/v1.0/qiniu/multipleQiniu"
            data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <button>选取文件</button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>
        <h2>picture</h2>
        <wu-plus-upload
            show-file-list="false"
            id="upload1"
            auto-upload="true"
            list-type="picture"
            file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{"name":"food2.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
            headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
            action="https://canyuegongzi.xyz/simple-file-center/v1.0/qiniu/multipleQiniu"
            data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <button>选取文件</button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>

        <h2>text</h2>
        <wu-plus-upload
            show-file-list="false"
            id="upload2"
            auto-upload="true"
            list-type="text"
            file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{"name":"food2.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
            headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
            action="https://canyuegongzi.xyz/simple-file-center/v1.0/qiniu/multipleQiniu"
            data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <button>选取文件</button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>

        <h2>drag</h2>
        <wu-plus-upload
            show-file-list="false"
            id="upload2"
            auto-upload="true"
            list-type="text"
            drag="true"
            file-list='[]'
            headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
            action="https://canyuegongzi.xyz/simple-file-center/v1.0/qiniu/multipleQiniu"
            data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>
        <h2>手动上传</h2>
        <wu-plus-upload
            show-file-list="false"
            id="upload223"
            auto-upload="false"
            list-type="text"
            multiple="true"
            file-list='[]'
            headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
            action="https://canyuegongzi.xyz/simple-file-center/v1.0/qiniu/multipleQiniu"
            data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <button>选取文件</button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>

        <button id="okUploadFile">确认上传文件</button>
    </div>

</div>
<script src="./dist/index.umd.js"></script>
<script type="module">
    const upload = document.getElementById("upload0")
    upload.addEventListener("change", (e) => {
        console.log("e", e)
    })
    upload.addEventListener("remove", (e) => {
        console.log("remove", e)
    })
    const upload1 = document.getElementById("upload1")
    upload1.addEventListener("change", (e) => {
        console.log("e", e)
    })
    upload1.addEventListener("remove", (e) => {
        console.log("remove", e)
    })
    const upload2 = document.getElementById("upload2")
    upload2.addEventListener("change", (e) => {
        console.log("e", e)
    })
    upload2.addEventListener("remove", (e) => {
        console.log("remove", e)
    })

    const okUploadFile = document.querySelector("#okUploadFile");
    okUploadFile.addEventListener("click", () => {
        const upload223 = document.querySelector("#upload223");
        console.log(upload223);
        upload223.submit();
    })

</script>
</body>
</html>
